<template>
  <view class="home">
    <view class="title">绑定手机号</view>
    <view class="iptBlock" style="margin-bottom: 40rpx;">
      <image class="code-icon" src="../../static/images/phone.png" mode=""></image>
      <input type="text" class="ipt" v-model="fromLine.phone" placeholder="请输入手机号" placeholder-class="styles" />
    </view>
    <view class="iptBlock" style="margin-bottom: 100rpx;">
      <image class="code-icon" src="../../static/images/code.png" mode=""></image>
      <input type="text" class="ipt" v-model="fromLine.sms_code" maxlength="4" placeholder="请输入验证码" placeholder-class="styles" />
      <view class="code-txt" @click="sendCode" v-if="!btnDisabled">
        获取验证码
      </view>
      <view class="code-txt" v-if="btnDisabled" style="font-size: 30rpx;">
        {{ countdown + " " + "s" }}
      </view>
    </view>
    <view class="loginBtn" @click="toBindPage">确认绑定</view>
  </view>
</template>

<script>
    import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
         fromLine: {
           auth_token: "",
           phone: "",
           sms_code: "",
           user_type: "app"
         },
         btnDisabled: false,
         timer: null,
         countdown: 0
      }
    },
    onLoad(option) {
      console.log("key", option.key);
      this.fromLine.auth_token = option.key;
    },
    methods: {
      // 发送验证码
      sendCode() {
        if (!this.fromLine.phone) {
          uni.showToast({
            title: "请输入手机号",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.sendMsg({
          phone: this.fromLine.phone,
          type: "login"
        }).then(res => {
          uni.showToast({
            title: "验证码发送成功",
            duration: 1500,
            icon: 'none',
            mask: true
          })
          this.countdown = 10;
          this.btnDisabled = true;
          if (this.timer) clearInterval(this.timer);
          this.timer = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown -= 1;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.btnDisabled = false;
            }
          }, 1000);
        })
      },
      toBindPage(){
        reqApi.registerPhone(this.fromLine).then(res=>{
          uni.showToast({
            title: "绑定成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          uni.setStorageSync("token", res.data.token);
          setTimeout(()=>{
            uni.switchTab({
              url: "/pages/home/index"
            })
          }, 1500)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wechat{
    width: 96rpx;
    height: 96rpx;
    position: fixed;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
  }
  .home {
    padding: 0 40rpx;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background: #fff;
    padding-top: 140rpx;
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 40rpx;
      color: #222222;
      margin-bottom: 100rpx;
    }

    .iptBlock {
      width: 100%;
      height: 104rpx;
      background: #F7F7F7;
      border-radius: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx;
      box-sizing: border-box;
      .code-icon {
        width: 48rpx;
        height: 48rpx;
      }

      .ipt {
        flex: 1;
        padding: 0 10rpx;
        box-sizing: border-box;
      }

      .code-txt {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #EEA800;
      }
    }

    .loginBtn {
      width: 100%;
      height: 88rpx;
      background: #EEA800;
      border-radius: 200rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }

    .agreement {
      display: flex;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      margin-top: 20rpx;
      justify-content: center;
      .round {
        width: 36rpx;
        height: 36rpx;
      }

      .xiey {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #222;
      }
    }
  }
</style>